<template>
	<div class="w1024-wrap">
		<div class="page">
			<div class="desc-wrap">
				<div class="operate-des" style="top:253px;text-align: left;">
					<p class="operate-title clear">
						<span class="left">操作按钮说明</span>
						<img class="retract right" v-if="showDes" @click="showDes=!showDes" style="margin-top: 3px;" src="http://xnhloc.xnhkfpt.com/qudao/static/channelthree/qwvedio/images/retract.svg">
						<img class="spread right" v-if="!showDes" @click="showDes=!showDes" style="margin-top: 3px; " src="http://xnhloc.xnhkfpt.com/qudao/static/channelthree/qwvedio/images/spread.svg">
					</p>

					<ul class="fixed-content" v-if="showDes">
						<li class="operate-item flex flex-align-center">
							<img src="../../../assets/images/hangupMessage/czjl.svg" />
							<p class="operate-text">操作记录</p>
						</li>
						<li class="operate-item flex flex-align-center">
							<img src="../../../assets/images/hangupMessage/dxmb.svg" class="operate-icon">
							<p class="operate-text">短信模板</p>
						</li>
						<li class="operate-item flex flex-align-center">
							<img src="../../../assets/images/hangupMessage/dxnr.svg"/>
							<p class="operate-text">短信内容</p>
						</li>
						<li class="operate-item flex flex-align-center">
							<span class="btn pay-btn" style="background: rgb(251, 193, 85);margin-left: 0;margin-top: 0;">申</span>
							<p class="operate-text">申诉</p>
						</li>
						<li class="operate-item flex flex-align-center">
							<img src="../../../assets/images/hangupMessage/th.svg" class="operate-icon">
							<p class="operate-text">替换</p>
						</li>
					</ul>
				</div>
			</div>
			<div class="head" style="margin-bottom: 10px;">
				<div class="group-info flex flex-align-center">
					<div>
						<span class="title">成员管理</span> 所在集团：{{group.circleoldname}}，共{{membercount}}个成员( 联通 {{quantitylist.ltopennum}}/{{quantitylist.lttotalnum}}； 移动{{quantitylist.ydopennum}}/{{quantitylist.ydtotalnum}}； 电信{{quantitylist.dxopennum}}/{{quantitylist.dxtotalnum}})
					</div>
				</div>
				<div class="search-wrap">
					<div class="clear">
						<div class="form-item left">
							<p class="form-item-title">成员号码：</p>
							<div class="form-item-content" style="width: 200px;">
								<el-input clearable v-model="searchData.phone" placeholder="请输入成员号码"></el-input>
							</div>
						</div>
					</div>
					<div class="clear">
						<div class="form-item left">
							<p class="form-item-title">挂短状态：</p>
							<div class="form-item-content" style="width: 120px;">
								<el-select @change="search" clearable v-model="searchData.hangupstatus" placeholder="请选择">
									<el-option key="1" label="已开通" value="1"></el-option>
									<el-option key="2" label="未开通" value="2"></el-option>
									<el-option key="6" label="加入失败(模板审核失败)" value="6"></el-option>
								</el-select>
							</div>
						</div>
						<div class="form-item left">
							<p class="form-item-title">申诉状态：</p>
							<div class="form-item-content" style="width: 120px;">
								<el-select @change="search" clearable v-model="searchData.appealstatus" placeholder="请选择">
									<el-option key="0" label="未申诉" value="0"></el-option>
									<el-option key="1" label="申诉中" value="1"></el-option>
									<el-option key="2" label="申诉成功" value="2"></el-option>
									<el-option key="3" label="申诉失败" value="3"></el-option>
								</el-select>
							</div>
						</div>
						<div class="form-item left">
							<p class="form-item-title">批次：</p>
							<div class="form-item-content" style="width: 120px;">
								<el-select filterable @change="search" clearable v-model="searchData.batchnum" placeholder="请选择">
									<el-option v-for="item in 1000" :key="item" :label="item" :value="item">
									</el-option>
								</el-select>
							</div>
						</div>
						<div class="form-item left">
							<p class="form-item-title">运营商：</p>
							<div class="form-item-content" style="width: 120px;">
								<el-select @change="search" clearable v-model="searchData.merchant" placeholder="请选择">
									<el-option key="1" label="电信" value="1"></el-option>
									<el-option key="2" label="移动" value="2"></el-option>
									<el-option key="3" label="联通" value="3"></el-option>
								</el-select>
							</div>
						</div>
					</div>
					<div class="clear">
						<div class="form-item left">
							<p class="form-item-title">号码状态：</p>
							<div class="form-item-content" style="width: 120px;">
								<el-select @change="search" clearable v-model="searchData.memberstatus" placeholder="请选择">
									<el-option key="1" label="待支付" value="1"></el-option>
									<el-option key="2" label="处理中" value="2"></el-option>
									<el-option key="3" label="已添加" value="3"></el-option>
									<el-option key="4" label="加入失败" value="4"></el-option>
									<el-option key="7" label="退款失败" value="7"></el-option>
									<el-option key="8" label="退款成功" value="8"></el-option>
									<el-option key="29" label="到期已下线" value="29"></el-option>
									<el-option key="30" label="替换中" value="30"></el-option>
								</el-select>
							</div>
						</div>
						<!--<div class="form-item left">
							<p class="form-item-title">删除状态：</p>
							<div class="form-item-content" style="width: 120px;">
								<el-select @change="search" clearable v-model="searchData.deletestatus" placeholder="请选择">
									<el-option key="0" label="未删除" value="0"></el-option>
									<el-option key="1" label="删除中" value="1"></el-option>
									<el-option key="3" label="删除失败" value="3"></el-option>
								</el-select>
							</div>
						</div>
						<div class="form-item left">
							<p class="form-item-title">续费状态：</p>
							<div class="form-item-content" style="width: 120px;">
								<el-select @change="search" clearable v-model="searchData.renewstatus" placeholder="请选择">
									<el-option key="0" label="未续费" value="0"></el-option>
									<el-option key="1" label="续费中" value="1"></el-option>
									<el-option key="2" label="续费成功" value="2"></el-option>
									<el-option key="3" label="续费失败" value="3"></el-option>
								</el-select>
							</div>
						</div>-->
						<div class="form-item left">
							<el-button type="primary" @click="search">查询</el-button>
						</div>
						<div class="form-item right" style="margin-right: 0;">
							<el-button type="primary left" @click="renew" v-if="searchData.circletype==1">续费</el-button>
							<el-button type="primary left" @click="appeal">申诉</el-button>
							<el-button type="primary left" v-if="dxcircleshow||ydcircleshow||ltcircleshow" @click="addMember">添加成员</el-button>
						</div>
					</div>
				</div>
			</div>
			<template v-if="list.length">
				<div class="table-wrap">
					<el-table ref="table" v-loading="loading" size="middle" :data="list" style="width: 100%">
						<el-table-column type="selection" width="36"></el-table-column>
						<el-table-column fixed prop="phone" label="成员号码" width="96">
							<template slot-scope="scope">
								<span v-if="scope.row.bulustatus==4||scope.row.bulustatus==3" class="text-btn" @click="addNumber(scope.row)">待补录</span>
								<span v-else-if="scope.row.bulustatus==1" class="text-btn">补录中</span>
								<span v-else>{{scope.row.phone}}</span>
							</template>
						</el-table-column>
						<el-table-column prop="name" label="支付类型" width="74">
							<template slot-scope="scope">
								<span>{{searchData.circletype==1?'统付':'个付'}}</span>
							</template>
						</el-table-column>
						<el-table-column prop="merchant" label="运营商" width="56">
							<template slot-scope="scope">
								<span v-if="scope.row.merchant==1">电信</span>
								<span v-if="scope.row.merchant==2">移动</span>
								<span v-if="scope.row.merchant==3">联通</span>
							</template>
						</el-table-column>
						<el-table-column prop="smstype" label="套餐类型" width="68">
							<template slot-scope="scope">
								<span v-if="scope.row.smstype==1">挂机短信 (文字版)</span>
								<span v-if="scope.row.smstype==2">挂机短信(视频版)</span>
								<span v-if="scope.row.smstype==3">挂短+彩铃</span>
							</template>
						</el-table-column>
						<el-table-column prop="smsquantity" label="套餐内容" width="74">
							<template slot-scope="scope">
								<p class="text-overflow-hidden">{{scope.row.smsquantity}}条短信</p>
							</template>
						</el-table-column>
						<el-table-column prop="memberfee" label="价格" width="45">
							<template slot-scope="scope">
								<span>{{scope.row.memberfee*scope.row.openmonth/100}}</span>
							</template>
						</el-table-column>
						<el-table-column prop="batchnum" label="批次" width="45"></el-table-column>
						<el-table-column prop="hangupstatus" label="挂短状态" width="70">
							<template slot-scope="scope">
								<span v-if="scope.row.hangupstatus==2||scope.row.hangupstatus==0">未开通</span>
								<span v-else-if="scope.row.hangupstatus==1">已开通</span>
								<span v-else-if="scope.row.hangupstatus==6">加入失败(模板审核失败)</span>
							</template>
						</el-table-column>
						<el-table-column prop="memberstatus" label="号码状态" width="74">
							<template slot-scope="scope">
								<span v-if="scope.row.bulustatus==3" class="red">补录失败</span>
								<template v-else>
									<span v-if="scope.row.memberstatus==1">待支付</span>
									<span v-else-if="scope.row.memberstatus==2">处理中</span>
									<span v-else-if="scope.row.memberstatus==3">已添加</span>
									<span v-else-if="scope.row.memberstatus==4&&!scope.row.auditmemo">加入失败</span>
									<span v-else-if="scope.row.memberstatus==4&&scope.row.auditmemo">加入失败({{scope.row.auditmemo}})</span>
									<span v-else-if="scope.row.memberstatus==7">退款失败</span>
									<span v-else-if="scope.row.memberstatus==8">退款成功</span>
									<span v-else-if="scope.row.memberstatus==29">到期已下线</span>
									<span v-else-if="scope.row.memberstatus==30">替换中</span>
									<span v-else>--</span>
								</template>
								
							</template>
						</el-table-column>
						<el-table-column prop="appealstatus" label="申诉状态" width="74">
							<template slot-scope="scope">
								<span v-if="scope.row.appealstatus==0">未申诉</span>
								<span v-if="scope.row.appealstatus==1">申诉中</span>
								<span v-if="scope.row.appealstatus==2">申诉成功</span>
								<span v-if="scope.row.appealstatus==3" class="red">申诉失败</span>
							</template>
						</el-table-column>
						<el-table-column prop="renewstatus" label="续费状态" width="74">
							<template slot-scope="scope">
								<span v-if="scope.row.renewstatus==0">未续费</span>
								<span v-if="scope.row.renewstatus==1">续费中</span>
								<span v-if="scope.row.renewstatus==2">续费成功</span>
								<span v-if="scope.row.renewstatus==3" class="red">续费失败</span>
							</template>
						</el-table-column>
						<!--<el-table-column prop="deletestatus" label="删除状态" width="74">
							<template slot-scope="scope">
								<span v-if="scope.row.deletestatus==0">未删除</span>
								<span v-if="scope.row.deletestatus==1">删除中</span>
								<span v-if="scope.row.deletestatus==3">删除失败</span>
							</template>
						</el-table-column>-->
						<el-table-column prop="templatename" label="当前模板" width="74">
							<template slot-scope="scope">
								<span v-if="scope.row.templatestatus==0">未设置</span>
								<span v-else-if="scope.row.templatestatus==2">设置失败</span>
								<span v-else>{{scope.row.smstitle}}</span>
							</template>
						</el-table-column>
						<el-table-column width="120" label="渠道备注">
							<template slot-scope="scope">
								<el-popover v-if="scope.row.channelmemo" placement="top-start" width="200" trigger="hover" :content="scope.row.channelmemo">
									<span slot="reference" class="text-btn" @click="markChannel(scope.row.hangupmemberid,scope.row.channelmemo)">已备注</span>
								</el-popover>
								<span v-else class="text-btn" @click="markChannel(scope.row.hangupmemberid,scope.row.channelmemo)">备注</span>
							</template>
						</el-table-column>
						<el-table-column prop="createtime" label="提交时间" width="76"></el-table-column>
						<el-table-column prop="expiretime" label="有效期" width="76">
							<template slot-scope="scope">
								<span>{{scope.row.expiretime||'--'}}</span>
							</template>
						</el-table-column>
						<el-table-column width="160" fixed="right" label="操作">
							<div slot-scope="scope" class="btn-inner clear">
									<div class="btn" title="操作记录" @click="seeRecord(scope.row.hangupmemberid)">
										<img src="../../../assets/images/hangupMessage/czjl.svg"/>
									</div>
									<div class="btn" title="短信模板" @click="goTemlateManage(scope.row.merchant)">
										<img src="../../../assets/images/hangupMessage/dxmb.svg"/>
									</div>
									<div class="btn" title="短信内容" @click="seeMessage(scope.row)">
										<img src="../../../assets/images/hangupMessage/dxnr.svg"/>
									</div>
									<span style="background: rgb(251,193,85);" class="btn pay-btn" v-if="scope.row.appealstatus!=2&&scope.row.memberstatus!=8" @click="singleAppeal(scope.row)" title="申诉">申</span>
									<div class="btn" v-if="scope.row.memberstatus==3&&scope.row.hangupstatus!=1&&scope.row.renewstatus!=1&&scope.row.appealstatus!=1" title="替换" @click="replacePhone(scope.row)">
										<img src="../../../assets/images/hangupMessage/th.svg"/>
									</div>
								</div>
							<!--<template>
								
								<div class="text-left">
									<span class="text-btn" @click="seeRecord(scope.row.hangupmemberid)">操作记录</span>
									<span class="text-btn" v-if="(scope.row.merchant==1&&dxcircleshow)||(scope.row.merchant==2&&ydcircleshow)||(scope.row.merchant==3&&ltcircleshow)" @click="resetTemplate(scope.row)">重置模板</span>
									<span class="text-btn" @click="seeMessage(scope.row)">短信内容</span>
									<span class="text-btn" v-if="scope.row.memberstatus==1" @click="changeYys(scope.row)">转网</span>
									<el-popconfirm v-if="(scope.row.exitstatus==0||scope.row.exitstatus==3)&&scope.row.memberstatus==2&&groupState&&scope.row.deletestatus!=1" confirm-button-text='确定' cancel-button-text='取消' icon="el-icon-info" icon-color="red" @confirm="refund(scope.row.hangupmemberid)" title="确定申请退订该成员吗？">
										<span slot="reference" class="text-btn">退订</span>
									</el-popconfirm>
									<el-popconfirm v-if="scope.row.memberstatus==2&&groupState&&scope.row.deletestatus!=1" confirm-button-text='确定' cancel-button-text='取消' icon="el-icon-info" icon-color="red" @confirm="del(scope.row.hangupmemberid)" title="确定申请删除该成员吗？">
										<span slot="reference" class="text-btn red">删除</span>
									</el-popconfirm>
									<span class="text-btn red" v-if="scope.row.appealstatus!=2" @click="singleAppeal(scope.row)">申诉</span>
									<span class="text-btn" @click="replacePhone(scope.row)">替换</span>
								</div>
							</template>-->
						</el-table-column>
					</el-table>
				</div>
				<el-pagination :current-page="this.searchData.pagenow" class="text-center" layout="prev, pager, next,sizes" prev-text="上一页" next-text="下一页" @size-change="pageSizeChange" @current-change="currentPageChange" :total="totalCount">
				</el-pagination>
			</template>

			<no-data v-if="!loading&&!list.length"></no-data>
		</div>

		<el-dialog title="渠道备注" top="40vh" :visible.sync="markChannelVisible" width="300px" center>
			<el-input type="textarea" :rows="4" v-model="channelmemo.channelmemo" placeholder="请输入备注信息"></el-input>
			<span slot="footer" class="dialog-footer">
			    <el-button type="primary" @click="saveChannelmemo">确 定</el-button>
			</span>
		</el-dialog>

		<el-dialog title="补录" top="30vh" :visible.sync="addNumberVisible" width="500px" center>
			<div class="dialog-content">
				<div class="form-item">
					<p class="form-item-title">原号码：</p>
					<div class="form-item-content" style="width: 300px;">
						{{member.beforebuluphone}}
					</div>
				</div>
				<div class="form-item">
					<p class="form-item-title">补录号码：</p>
					<div class="form-item-content" style="width: 300px;">
						<el-input maxlength="11" v-model="member.afterbuluphone" placeholder="请输入号码"></el-input>
					</div>
				</div>
			</div>
			<p class="dialog-tip">（需等待管理员1小时后处理结果）</p>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" plain @click="addNumberVisible=false">取 消</el-button>
			    <el-button type="primary" @click="confirmAddNumber">确 定</el-button>
			</span>
		</el-dialog>
		
		<el-dialog title="替换" top="30vh" :visible.sync="replacePhoneVisible" width="500px" center>
			<div class="dialog-content">
				<div class="form-item">
					<p class="form-item-title">当前号码：</p>
					<div class="form-item-content" style="width: 300px;">
						{{exchange.replaceBefore}}
					</div>
				</div>
				<div class="form-item">
					<p class="form-item-title">替换号码：</p>
					<div class="form-item-content" style="width: 300px;">
						<el-input maxlength="11" @input="phoneChange" v-model="exchange.replaceafter" placeholder="请输入号码"></el-input>
						<span class="red" v-if="phoneAndFeeInfo.dxnum">电信</span>
						<span class="red" v-if="phoneAndFeeInfo.ydnum">移动</span>
						<span class="red" v-if="phoneAndFeeInfo.ltnum">联通</span>
					</div>
				</div>
			</div>
			<p class="dialog-tip">（需等待管理员1小时后处理结果）</p>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" plain @click="replacePhoneVisible=false">取 消</el-button>
			    <el-button type="primary" @click="confirmReplacePhone">确 定</el-button>
			</span>
		</el-dialog>

		<el-dialog title="申诉" top="30vh" :visible.sync="appealVisible" width="500px" center>
			<div class="dialog-content">
				<div class="form-item">
					<p class="form-item-title">申诉号码：</p>
					<div class="form-item-content" style="width: 300px;">
						{{appealObj.numbers}}
					</div>
				</div>
				<div class="form-item">
					<p class="form-item-title">申诉内容：</p>
					<div class="form-item-content" style="width: 300px;">
						<el-input type="textarea" :rows="5" v-model="appealObj.appealdes" placeholder="请输入"></el-input>
					</div>
				</div>
			</div>
			<p class="dialog-tip">（需等待管理员1小时后处理结果）</p>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" plain @click="appealVisible=false">取 消</el-button>
			    <el-button type="primary" @click="confirmAppeal">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="重置模板" top="15vh" :visible.sync="resetTemplateVisible" width="900px" center>
			<message-editor :groupname="group.circleoldname" :linkphone="group.linkphone" :phoneAndFeeInfo="phoneAndFeeInfo" ref="messageEditor" scene="resetTemplate" :circlecommonuid="group.circlecommonuid" :type="selectedObj.smstype" :merchantType="5" v-bind="template" @change="templateChange"></message-editor>
			<p class="dialog-tip">（提交修改短信模板后，服务人员将在xx小时内进行处理，请知悉）</p>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" plain @click="resetTemplateVisible=false">取 消</el-button>
			    <el-button type="primary" @click="confirmResetTemplate">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="携号转网" top="30vh" :visible.sync="changeYysVisible" width="500px" center>
			<div class="dialog-content">
				<div class="form-item">
					<p class="form-item-title" style="width: 130px;">请选择运营商：</p>
					<div class="form-item-content">
						<el-radio-group v-model="yys.merchant" class="yys">
							<el-radio label="1">中国电信</el-radio>
							<el-radio label="2">中国移动</el-radio>
							<el-radio label="3">中国联通</el-radio>
						</el-radio-group>
					</div>
				</div>
			</div>
			<!--<p class="dialog-tip">（需等待管理员***小时后处理结果）</p>-->
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" plain @click="changeYysVisible=false">取 消</el-button>
			    <el-button type="primary" @click="confirmChangeYys">确 定</el-button>
			</span>
		</el-dialog>

		<el-dialog title="短信内容" top="30vh" :visible.sync="messageVisible" width="500px" center>
			<div class="dialog-content">
				<div class="form-item" style="margin-bottom: 12px;">
					<p class="form-item-title" style="width: 130px;">短信名称：</p>
					<div class="form-item-content">
						<p>{{message.smstitle}}</p>
					</div>
				</div>
				<div class="form-item" style="margin-bottom: 12px;">
					<p class="form-item-title" style="width: 130px;">短信内容：</p>
					<div class="form-item-content" style="width: 280px;">
						<p style="line-height: 24px;padding-top: 4px;">{{message.smstextcontent}}</p>
					</div>
				</div>
				<div class="form-item" style="margin-bottom: 12px;" v-if="message.smsvideoimg">
					<p class="form-item-title" style="width: 130px;">图片：</p>
					<div class="form-item-content">
						<div class="upload-wrapper">
							<img @click="viewImage(message.smsvideoimg)" :src="message.smsvideoimg" />
						</div>
					</div>
				</div>
				<div class="form-item" style="margin-bottom: 12px;" v-if="message.smsvideocontent">
					<p class="form-item-title" style="width: 130px;">视频：</p>
					<div class="form-item-content">
						<div class="upload-wrapper">
							<video :src="message.smsvideocontent"></video>
							<div class="cover">
								<i @click="playVideo(message.smsvideocontent)" class="el-icon-video-play center"></i>
							</div>
						</div>
					</div>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
			    <el-button type="primary" @click="messageVisible=false">关 闭</el-button>
			</span>
		</el-dialog>
		<view-img :src="imgSrc" v-if="showImg" @close="closeImg"></view-img>
	</div>

</template>

<script>
	import MessageEditor from '@/components/MessageEditor.vue'
	import NoData from '@/components/NoData'
	import { phoneReg, deepClone } from '@/utils/common'

	export default {
		name: 'MemberManage',
		components: {
			MessageEditor,
			NoData,
		},
		data() {
			return {
				loading: false,
				network: false,
				totalCount: 0,
				groupState: localStorage.getItem('groupState') == 'true',
				membercount: 0,
				transfer: 0, //是否为转网后重置模板 0否  1是
				showDes:true,
				dxcircleshow:false,
				ydcircleshow:false,
				ltcircleshow:false,
				group: {},
				quantitylist: {},
				searchData: {
					shownum: 10,
					pagenow: 1,
					circlecommonuid: this.$route.params.id,
					circletype: Number(this.$route.params.circletype),
					phone: '',
					batchnum: '',
					merchant: '',
					memberstatus: '',
					hangupstatus: '',
				},
				list: [],
				phoneAndFeeInfo: {},
				markChannelVisible: false,
				addNumberVisible: false,
				replacePhoneVisible:false,
				appealVisible: false,
				resetTemplateVisible: false,
				changeYysVisible: false,
				messageVisible: false,

				channelmemo: {
					channelmemo: ''
				},
				yys: {},
				appealObj: {},
				member: {},
				exchange:{},
				selectedObj: {},
				template: {},
				message: {},
			}
		},
		async mounted() {
			console.log(this.$route)
			this.getGroupInfo()
			this.getData()
		},
		methods: {
			phoneChange(){
				if(phoneReg.test(this.exchange.replaceafter)){
					this.queryPhoneAndFee(this.exchange.replaceafter)
				}else{
					this.phoneAndFeeInfo={}
				}
			},
			goTemlateManage(merchant){
				this.$router.push('/smstemplate/'+this.$route.params.id+'/'+merchant)
			},
			getGroupInfo() {
				this.$request.queryGroupDetail({
						circlecommonuid: this.searchData.circlecommonuid
					})
					.then(res => {
						if(res.code == 0) {
							this.group = res.circledetail[0] ? res.circledetail[0] : {}

						} else {
							this.msgError(res.msg)
						}
					})
			},
			//续费
			renew() {
				var flag = true
				var sameSmstypeFlag = true,
					smstype = ''
				var numberList = []

				this.$refs.table.selection.forEach(item => {
					if(smstype && item.smstype != smstype) {
						sameSmstypeFlag = false
					}
					smstype = item.smstype
					if(item.hangupstatus != 1 || item.memberstatus == 1 ) {
						flag = false
					} else {
						numberList.push({
							phone:item.phone,
							memberId:item.hangupmemberid
						})
					}
				})
				if(!sameSmstypeFlag) {
					this.msgError('请勾选相同套餐类型的号码进行续费')
					return
				}
				if(!flag) {
					this.msgError('待支付及未开通状态的号码不可续费')
					return
				}
				if(!numberList.length) {
					this.msgError('请先选择数据')
					return
				}
				var obj = this.$refs.table.selection[0]
				this.$store.commit('setGroupInfo', {
					circlecommonuid: obj.circlecommonuid,
					circleoldname: this.group.circleoldname,
					smstype: obj.smstype
				})
				this.$store.commit('setNumberList', numberList)
				this.$router.push('/renew/3/' + this.searchData.circletype)

			},
			//申诉
			appeal() {
				var flag = true
				var ids = []
				var numberList = []
				this.$refs.table.selection.forEach(item => {
					if(item.deletestatus == 1||item.appealstatus==2) {
						flag = false
					} else {
						ids.push(item.hangupmemberid)
						numberList.push(item.phone)
					}
				})
				if(!flag) {
					this.msgError('已申诉成功的号码不可申诉')
					return
				}
				if(!ids.length) {
					this.msgError('请先选择数据')
					return
				}
				this.appealObj = {
					circlecommonuid: this.group.circlecommonuid,
					hangupmemberids: ids.join(','),
					numbers: numberList.join(','),
					appealdes: '',
				}
				this.appealVisible = true
			},
			singleAppeal(obj) {
				this.appealObj = {
					circlecommonuid: this.group.circlecommonuid,
					hangupmemberids: obj.hangupmemberid,
					numbers: obj.phone,
					appealdes: '',
				}
				this.appealVisible = true
			},
			confirmAppeal() {
				if(!this.appealObj.appealdes) {
					this.msgError('请输入申诉内容')
					return
				}
				if(this.network) {
					return
				}
				this.network = true
				this.$request.appealMember(this.appealObj)
					.then((res) => {
						if(res.code == 0) {
							this.appealVisible = false
							this.msgSuccess('操作成功')
							this.search()
						} else {
							this.msgError(res.msg)
						}
						this.network = false
					})
			},
			//添加成员
			addMember() {
				console.log(this.group)
				this.$store.commit('setGroupInfo', this.group)
				this.$router.push('/addmember/4/' + this.searchData.circletype + '/' + this.searchData.circlecommonuid)
			},
			queryPhoneAndFee(phone) {
				this.$request.queryPhoneAndFee({
					phones:phone ,
					comboid: 1,
					smstype: 1,
					month: 1,
				}).then(res => {
					if(res.code == 0) {
						this.phoneAndFeeInfo = res
					} else {
						this.msgError(res.msg)
					}
				})
			},
			pageSizeChange(pageSize) {
				this.searchData.shownum = pageSize
				this.getData()
			},
			currentPageChange(page) {
				this.searchData.pagenow = page
				this.getData()
			},
			search() {
				this.searchData.pagenow = 1
				this.getData()
			},
			getData() {
				this.loading = true
				this.$request.queryMemberList(this.searchData)
					.then(res => {
						if(res.code == 0) {
							this.list = res.memberlist
							this.dxcircleshow=res.dxcircleshow
							this.ydcircleshow=res.ydcircleshow
							this.ltcircleshow=res.ltcircleshow
							this.quantitylist = res.quantitylist[0] ? res.quantitylist[0] : []
							this.totalCount = res.page.totalresult
							this.membercount = res.quantitylist[0].dxtotalnum + res.quantitylist[0].ydtotalnum + res.quantitylist[0].lttotalnum
						} else {
							this.msgError(res.msg)
						}
						this.loading = false
					})
			},

			markChannel(hangupmemberid, channelmemo) {
				this.channelmemo = {
					hangupmemberid: hangupmemberid,
					channelmemo: channelmemo
				}
				this.markChannelVisible = true
			},
			saveChannelmemo() {
				if(!this.channelmemo.channelmemo) {
					this.msgError('请输入备注')
					return
				}
				if(this.network) {
					return
				}
				this.network = true
				this.$request.saveChannelMark(this.channelmemo)
					.then((res) => {
						if(res.code == 0) {
							this.markChannelVisible = false
							this.msgSuccess('操作成功')
							this.getData()
						} else {
							this.msgError(res.msg)
						}
						this.network = false
					})
			},

			addNumber(obj) {
				this.member = {
					circlecommonuid: this.group.circlecommonuid,
					hangupmemberid: obj.hangupmemberid,
					beforebuluphone: obj.phone,
					afterbuluphone: '',
				}
				this.addNumberVisible = true
			},
			confirmAddNumber() {
				if(!this.member.afterbuluphone) {
					this.msgError('请输入补录号码')
					return
				}
				if(!phoneReg.test(this.member.afterbuluphone)) {
					this.msgError('补录号码格式不正确')
					return
				}
				if(this.network) {
					return
				}
				this.network = true
				this.$request.addPhone(this.member)
					.then((res) => {
						if(res.code == 0) {
							this.addNumberVisible = false
							this.msgSuccess('操作成功')
							this.search()
						} else {
							this.msgError(res.msg)
						}
						this.network = false
					})
			},
			replacePhone(obj) {
				this.exchange = {
					hangupmemberid: obj.hangupmemberid,
					replaceBefore:obj.phone,
					replaceafter: '',
				}
				this.replacePhoneVisible = true
			},
			confirmReplacePhone() {
				if(!this.exchange.replaceafter) {
					this.msgError('请输入替换号码')
					return
				}
				if(!phoneReg.test(this.exchange.replaceafter)) {
					this.msgError('替换号码格式不正确')
					return
				}
				if(this.network) {
					return
				}
				this.network = true
				this.$request.replacePhone(this.exchange)
					.then((res) => {
						if(res.code == 0) {
							this.replacePhoneVisible = false
							this.msgSuccess('操作成功')
							this.search()
						} else {
							this.msgError(res.msg)
						}
						this.network = false
					})
			},
			seeRecord(hangupmemberid) {
				this.$router.push('/operatehistory/' + this.group.circlecommonuid + '/' + hangupmemberid)
			},
			resetTemplate(obj, flag) {
				if(flag) {
					this.transfer = 1
				} else {
					this.transfer = 0
				}
				this.selectedObj=obj
				this.phoneAndFeeInfo = {
					dxnum: obj.merchant == 1 ? 1 : 0,
					ydnum: obj.merchant == 2 ? 1 : 0,
					ltnum: obj.merchant == 3 ? 1 : 0,
				}
				this.template = {
					circlecommonuid: this.group.circlecommonuid,
					circletype: this.group.circletype,
					hangupmemberid: obj.hangupmemberid,
					hanguptemplateid: '',
					smstextcontent: '',
					usetemplate: 1,
					templatetype: obj.smstype,
					smsvideocontent: '',
					smsvideoimg: '',
					merchant: obj.merchant,
					smstextcontentdx: '',
					smstextcontentyd: '',
					smstextcontentlt: '',
				}
				
				this.resetTemplateVisible = true
				this.$nextTick(() => {
					this.$refs.messageEditor.templateId = ''
					this.$refs.messageEditor.templateIddx = ''
					this.$refs.messageEditor.templateIdyd = ''
					this.$refs.messageEditor.templateIdlt = ''
					this.$refs.messageEditor.extraText=''
				})

			},

			templateChange(template) {
				var {
					smstextcontent,
					smsvideocontent,
					smsvideoimg
				} = template
				this.template.hanguptemplateid = template['hanguptemplateid' + ['dx', 'yd', 'lt'][this.selectedObj.merchant - 1]]
				if(template['smstextcontent' + ['dx', 'yd', 'lt'][this.selectedObj.merchant - 1]]) {
					this.template.smstextcontent = template['smstextcontent' + ['dx', 'yd', 'lt'][this.selectedObj.merchant - 1]].replace('{集团名称}', this.group.circleoldname).replace('{联系电话}', this.group.linkphone)
					this.template['smstextcontent' + ['dx', 'yd', 'lt'][this.selectedObj.merchant - 1]] = template['smstextcontent' + ['dx', 'yd', 'lt'][this.selectedObj.merchant - 1]].replace('{集团名称}', this.group.circleoldname).replace('{联系电话}', this.group.linkphone)
				}
				this.template.smsvideocontent = template.smsvideocontent
				this.template.smsvideoimg = template.smsvideoimg
				this.template.usetemplate = template['usetemplate' + ['dx', 'yd', 'lt'][this.selectedObj.merchant - 1]] || 0
			},
			async confirmResetTemplate() {
				if(this.template.usetemplate == 1 && (!this.template.hanguptemplateid || !this.template.smstextcontent)) {
					this.msgError('请选择模板')
					return
				}
				if(!this.template.smstextcontent) {
					this.msgError('请输入短信内容')
					return
				}
				if(this.template.templatetype == 2 && !this.template.smsvideocontent && !this.template.smsvideoimg) {
					this.msgError('视频短信中的图片和视频请至少上传一项')
					return
				}
				var template = deepClone(this.template)
				template.type = this.selectedObj.merchant
				template.transfer = this.transfer ? 1 : ''
				if(this.selectedObj.merchant==3){
					template.smstextcontent=template.smstextcontent+this.$refs.messageEditor.extraText
					template.smstextcontentlt=template.smstextcontentlt+this.$refs.messageEditor.extraText
				}
				this.network=true
				if(this.transfer){
					let res=await this.changeYysRequest()
					if(!res||res.code!=0){
						return
					}
				}
				this.network=true
				this.$request.resetMemberTemplate(template)
					.then(res => {
						if(res.code == 0) {
							this.resetTemplateVisible = false
							this.msgSuccess('操作成功')
							this.getData()
						} else {
							this.msgError(res.msg)
						}
					})
			},
			changeYys(obj) {
				this.selectedObj = deepClone(obj)
				this.yys = {
					circlecommonuid: this.group.circlecommonuid,
					hangupmemberid: obj.hangupmemberid,
					merchant: obj.merchant
				}
				this.changeYysVisible = true
			},
			confirmChangeYys() {
				this.changeYysVisible = false
				this.$confirm('转网后之前模板将不再适用，请重新设置短信模板', '转网提示', {
					confirmButtonText: '设置模板',
					showCancelButton: false,
					showClose: false,
					closeOnClickModal: false,
					type: 'warning'
				}).then(() => {
					this.selectedObj.merchant = this.yys.merchant
					this.resetTemplate(this.selectedObj, 1)
				}).catch(() => {});

			},
			changeYysRequest() {
				return new Promise((resolve,reject) => {
					this.$request.transferMemberMerchant(this.yys)
						.then((res) => {
							if(res.code == 0) {
								this.getData()
							} else {
								this.network = false
								this.msgError(res.msg)
							}
							resolve(res)
						})
				}).catch(() => {
					this.network = false
				})
			},
			refund(hangupmemberid) {
				if(this.network) {
					return
				}
				this.network = true
				this.$request.refundMember({
						circlecommonuid: this.group.circlecommonuid,
						hangupmemberid: hangupmemberid
					})
					.then(res => {
						if(res.code == 0) {
							this.msgSuccess('操作成功')
							this.search()
						} else {
							this.msgError(res.msg)
						}
						this.network = false
					})
			},
			del(hangupmemberid) {
				if(this.network) {
					return
				}
				this.network = true
				this.$request.delMember({
						circlecommonuid: this.group.circlecommonuid,
						hangupmemberids: hangupmemberid
					})
					.then(res => {
						if(res.code == 0) {
							this.msgSuccess('操作成功')
							this.search()
						} else {
							this.msgError(res.msg)
						}
						this.network = false
					})
			},
			seeMessage({
				smstitle,
				smstextcontent,
				smsvideoimg,
				smsvideocontent
			}) {
				this.message = {
					smstitle,
					smstextcontent,
					smsvideoimg,
					smsvideocontent
				}
				this.messageVisible = true
			},
		}
	}
</script>

<style scoped lang="scss">
	.desc-wrap {
		position: fixed;
		width: 1024px;
		height: 0;
		top: 114px;
		left: 0;
		right: 0;
		margin: 0 auto;
		text-align: left;
	}
	
	.operate-des {
		position: absolute;
		right: -136px;
		top: 181px;
		padding: 0 16px 0 14px;
		color: #333;
		font-size: 12px;
		background: #EEF6FA;
	}
	
	.operate-title {
		width: 95px;
		font-weight: bold;
		line-height: 16px;
		padding-top: 16px;
		padding-bottom: 16px;
		font-size: 12px;
	}
	
	.operate-item {
		margin-bottom: 10px;
	}
	
	.operate-des .operate-icon {
		margin: 0;
	}
	
	.operate-text {
		margin-left: 10px;
	}
	.page {
		.head {
			border-bottom: 10px solid #f5f5f5;
			padding: 0 20px;
			.group-info {
				height: 73px;
				border-bottom: 1px solid #f5f5f5;
				font-size: 14px;
				text-indent: 10px;
				.title {
					font-weight: bold;
					font-size: 18px;
					margin-right: 19px;
				}
			}
		}
		.search-wrap {
			padding: 24px 10px 8px;
			margin-bottom: 10px;
		}
		>>>.el-table {
			th {
				>.cell {
					padding-left: 6px;
					padding-right: 6px;
					text-align: center;
				}
			}
			td {
				>.cell {
					padding-left: 4px;
					padding-right: 4px;
					text-align: center;
					font-size: 12px;
				}
			}
		}
	}
	.btn-inner{
		margin-top: -8px;
		margin-left: -8px;
		
	}
	.btn{
		width: 24px;
		height: 24px;
		margin-left: 8px;
		margin-top: 8px;
		text-align: center;
		line-height: 24px;
		color: #fff;
		font-weight: bold;
		font-size: 14px;
		cursor: pointer;
		float: left;
		border-radius: 2px;
		position: relative;
		img{
			width: 100%;
			height: 100%;
		}
	}
	>>>.el-dialog__body {
		padding: 16px 16px 24px;
		.dialog-content {
			border-top: 1px solid #eee;
			border-bottom: 1px solid #eee;
			min-height: 184px;
			padding: 12px 10px 0;
			.yys {
				.el-radio {
					display: block;
					height: 32px;
					line-height: 32px;
				}
			}
			.upload-wrapper {
				width: 100px;
				height: 100px;
				margin-top: 8px;
				position: relative;
				background: #f5f5f5;
				>img,
				>video {
					width: 100%;
					height: 100%;
				}
				.el-icon-video-play {
					width: 40px;
					height: 40px;
					color: #fff;
					font-size: 40px;
				}
			}
		}
		.dialog-tip {
			font-size: 14px;
			color: red;
			text-align: center;
			line-height: 32px;
		}
	}
</style>